<template>
    <div>
        <h2>
            我是header组件----
            {{msg}}
        </h2>
         <button @click="getHttpDataMethod()">请求数据</button>
         <ul>
             <li v-for="item in list">item</li>
         </ul>
    </div>
</template>
<script>
/** 请求数据
 * *1- vue resource----官方提供的vue网络数据请求的插件
 * *
 * *安装vue-resource模块
 * * npm install vue-resource --save 
 * 2-axios 
 * 安装cnpm install axios --save
 * 哪里用哪里引入
 * 
 * * */
import Axios from 'axios'
export default {
    data(){
        return{
            msg:'hello vue ',
            list :[]
        }
    },
    methods:{
        //get http data
        getHttpDataMethod(){

           // GET /someUrl
           
             let api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
             /* 
             *http get vue---method
             *
              this.$http.get(api).then(response => {
    // get body data
    this.list = response.body;

  }, response => {
    // error callback
  });
             */
            
    //    method----aaxios method
      Axios.get(api).then(response=>{
          this.list = data;
      }).catch((erro)=>{
          console.log(erro);
      })
        }
    },
    mounted(){
        this.getHttpDataMethod();
    }

}
</script>

<style scoped>
h2{
    background-color: yellow;
    color: green;
}
</style>
